<template>
  <div id="city" ref="cityList" v-show="this.cityShow">
     <header id="header3">
      <router-link to slot="left" class="back">
        <img src="../../../static/m_img/back.png" alt class @click="handleBack()">
      </router-link>
      <p class="ellipsis-1">{{title}}</p>
    </header>
    <div class="listBox" :style="{height: cityListHeight + 'px'}">
      <mt-index-list>
        <mt-index-section
          :index="item.firstLetter"
          v-for="(item,index) in provinceList"
          :key="index"
        >
          <mt-cell
            :title="province.provinceName"
            v-for="(province,index) in item.provinces"
            :key="index"
            @click.native="cityPoup(province.provinceId,province.provinceName)"
          ></mt-cell>
        </mt-index-section>
      </mt-index-list>
    </div>
    <mu-drawer :open.sync="open" :docked="docked" :right="position === 'right'">
      <mu-list>
        <mu-list-item button @click="handleCityBack">
          <mu-list-item-title><上一级</mu-list-item-title>
        </mu-list-item>
        <mu-list-item
          button
          v-for="(city,index) in cityList"
          :key="index"
          @click="handleCity(city.cityName)"
        >
          <mu-list-item-title>{{city.cityName}}</mu-list-item-title>
        </mu-list-item>
      </mu-list>
    </mu-drawer>
  </div>
</template>
<script>
import vHeader3 from "./Header3";
import { getReq } from "../../assets/js/api.js";
export default {
  data() {
    return {
      cityListHeight: "",
      provinceList: [],
      cityList: [],
      curProvinceName: "",
      curCityName: "",
      open: false,
      position: "right",
      docked: true
    };
  },
  props: {
    cityShow: Boolean,
    title: String
  },
  components: { vHeader3 },
  methods: {
    //   indexList高度
    indexListHeight() {
      let winHeight =
        window.innerHeight ||
        document.documentElement.clientHeight ||
        document.body.clientHeight;
      this.cityListHeight =
        winHeight - this.$refs.cityList.getBoundingClientRect().top;
    },
    // 获取省份信息
    getProvince() {
      getReq("/app/config/getAllProvince").then(res => {
        let { content, errcode, message } = res;
        if (errcode == 0) {
          this.provinceList = content;
        }
      });
    },
    // 打开城市列表
    cityPoup(provinceId, provinceName) {
      var params = {
        provinceId: provinceId
      };
      this.curProvinceName = provinceName;
      getReq("/app/config/getAllCitysByProvinceId", params).then(res => {
        let { content, errcode, message } = res;
        if (errcode == 0) {
          if (content.length <= 0) {
            this.curCityName = "";
            this.$emit("listenToChildEvent", false);
          } else {
            this.open = true;
            this.cityList = content;
          }
        }
      });
    },
    // 点击城市
    handleCity(cityName) {
      this.open = false;
      this.curCityName = cityName;
      this.$emit("listenToChildEvent", false);
    },
    // 回到上一级
    handleCityBack() {
      this.open = false;
    },
    // 返回
    handleBack(){
      this.$emit("listenToChildEvent", false);
    }
  },
  mounted() {
    this.indexListHeight();
    this.getProvince();
  }
};
</script>
<style lang="scss">
#city {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 10000;
  .mint-cell-text {
    color: #323232;
    font-size: 1.25rem;
  }
  .mint-indexsection-index {
    color: #666;
  }
  .mint-indexlist-navitem {
    color: #007aff;
  }
  .mint-cell-wrapper {
    border-bottom: 1px solid rgba(229, 229, 229, 1);
    padding: 0;
    margin: 0 10px;
    width: auto;
  }
  .mint-indexlist-nav {
    background: transparent;
    border-left: 0px;
  }
  .mint-indexsection-index {
    height: 30px;
    padding: 0 10px;
    line-height: 30px;
    background: #f4f6f8;
  }
  .mint-popup {
    width: 50%;
    height: 100%;
  }
  .mu-list li {
    border-bottom: 1px solid rgba(229, 229, 229, 1);
  }
  .mu-item-sub-title,
  .mu-item-title {
    color: #323232;
    font-size: 1.25rem;
  }
    .mu-drawer{
    width: 100%;
  }
  #header3 {
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  padding: 0 2%;
  .back img,
  .back {
    width: 9px;
    height: 17.5px;
  }
  p {
    width: 90%;
    text-align: center;
    color: #323232;
    font-size: 1.5rem;
  }
}
}
</style>
